<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS属性</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            height: 800px;
        }

        .div {
            /* width height 宽度 和 高度 px  百分比 相对于父元素*/
            /* width: 900px;
            height: 500px; */
            width: 600px;
            height: 500px;
            /* background-color: blueviolet; */
            /* border-style 必须出现*/
            /* border-width: 10px; */
            /* border-color: black; */
            /* solid 实线 double 双实线 dashed 虚线 dotted 点虚线 */
            /* border-style: double; */
            /* border ：宽度、样式、颜色*/
            /* border: black solid 10px ; */
            /* border-radius 圆角 */
            /* border-radius: 10px; */
            /* border-top/bottom/left/right */
            border-top: 4px solid black;
            border-bottom: 4px solid blue;
            border-left: 4px dotted red;
            border-right: 4px dashed yellow;
            /* margin 两个盒子之间的距离 */
            /* margin 四周的外边距 一个值：四周 两个值：上下 左右 三个值：上 左右 下 四个值：上 右 下 左*/
            /* margin: 25px; */
            /* margin: 10px 20px; */
            /* margin: 10px 20px 5px; */
            /* margin: 10px 5px 15px 0; */
            /* margin: 10px auto 0; */
            /* margin: ; */
            margin-top: 10px;
            /* margin-left: -20px; */
            margin-bottom: 20px;
            /* padding 边框到内容的距离 */
            /* padding 四周的内填充 一个值：四周 两个值：上下 左右  三个值：上 左右 下  四个值：上 右 下 左*/
            /* padding: 10px; */
            padding: 10px 20px;
            /* conent-box : width/height 内容占据的大小 */
            /* border-box : width/height 实际盒子占据的大小 */
            box-sizing: border-box;
        }

        /* 当两个外边距重叠的时候 取得是两者的最大值 */
        .div2 {
            margin-top: 30px;
            width: 600px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="div">这是一个div</div>
    <div class="div2">这是第二个div</div>
</body>
</html>